<template>
	<div ref="codeBox">
		<div ref="element" :class="expand?'':'component-source-code'">
			<slot></slot>
			<div class="expand-style" v-show="!expand&&height>=500">
				<span @click="clickExpand()" class="expand-and-collapse">
					展开 <svg xmlns="http://www.w3.org/2000/svg" style="width: 20px;height: 20px;"
						viewBox="0 0 1024 1024">
						<path fill="currentColor"
							d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z">
						</path>
					</svg>
				</span>
			</div>
		</div>
		<div v-show="expand&&height>=500">
			<span class="expand-and-collapse" @click="clickExpand()">
				收起 <svg xmlns="http://www.w3.org/2000/svg" style="width: 20px;height: 20px;" viewBox="0 0 1024 1024">
					<path fill="currentColor"
						d="m488.832 344.32-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872 319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z">
					</path>
				</svg>
			</span>
		</div>
	</div>

</template>

<script>
	export default {
		name: 'folding-panel',
		data() {
			return {
				expand: false, //是否展开，默认false 不展开
				height: 0,//当前元素高度
			}
		},
		methods: {
			//点击展开收起
			clickExpand() {
				let openHeight = this.$refs.codeBox.offsetHeight;
				this.expand = !this.expand;
				if(!this.expand){
					this.$emit('close');
				}
			},
		},
		mounted() {
			this.$nextTick(() => { // 页面渲染完成后的回调
				this.height = this.$refs.element.offsetHeight;
			})
		},
	}
</script>

<style>
	/* 组件源码样式 */
	.component-source-code {
		position: relative;
		max-height: 500px;
		overflow: hidden;
	}

	.expand-style {
		width: 100%;
		height: 200px;
		position: absolute;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
		bottom: 0;
	}

	.expand-and-collapse {
		text-align: center;
		font-size: 14px;
		color: #7a8f9a;
		line-height: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.expand-and-collapse:hover {
		color: #4e6ef2;
	}


	.wgt-answers-arrowdown {}
</style>
